<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/jquery-3.7.1.min.js"></script>
    <script>
        $(function () {
        //    <input type="button" value="将张三放置在city的后面" id="b1">
            $("#b1").click(function () {
                $("#city").append($("#zs"))
            })
        //    <input type="button" value="将张三放置在city的前面" id="b2">
            $("#b2").click(function () {
                $("#city").prepend($("#zs"))
            })
        //    <input type="button" value="将李四放置在北京的后面" id="b3">
            $("#b3").click(function () {
                // $("#bj").after($("#ls"))
                $("#ls").insertAfter($("#bj"))
            })
        //    <input type="button" value="将李四放置在福州的前面" id="b4">
            $("#b4").click(function () {
                // $("#fz").before($("#ls"))
                $("#ls").insertBefore( $("#fz"))
            })
        })
    </script>
</head>
<body>
<input type="button" value="将张三放置在city的后面" id="b1">
<input type="button" value="将张三放置在city的前面" id="b2">
<input type="button" value="将李四放置在北京的后面" id="b3">
<input type="button" value="将李四放置在福州的前面" id="b4">

<ul id="city">
    <li id="bj">北京</li>
    <li id="sh">上海</li>
    <li id="tj">天津</li>
    <li id="fz">福州</li>
</ul>



<ul>
    <li id="zs">张三</li>
    <li id="ls">李四</li>
</ul>
</body>
</html>